<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单实用的jQuery响应式垂直时间轴插件</title>
	<link rel="stylesheet" type="text/css" href="../lib/css/time/cntl.css">

</head>

<body>
	<div class="box">
		<div class="jq21-container"><img src="../lib/images/time/b5.jpg" alt=""></div>
	</div>
	<div class="generalize">
		<span class="bio">全栈一二班概况</span>
		<div class="home">
			<a href="javascript:;" class="colour">首页 > 全栈一二班概况 > 制度管理 > 聊天室 > </a>
		</div>
	</div>
	<!-- <div class="frame"></div> -->
	<div class="jq22-container">
		<div class="cntl">
			<span class="cntl-bar cntl-center">
				<span class="cntl-bar-fill"></span>
			</span>

			<div class="cntl-states">

				<div class="cntl-state">
					<div class="cntl-content">
						<h4>2019-5-9</h4>
						<p>坚持跑步快两个月了每天晚上夜跑 跑一天爽一天 一直跑一直爽</p>
					</div>
					<div class="cntl-icon cntl-center">00</div>
				</div>
				<div class="cntl-state">

					<div class="cntl-content">
						<h4>scnojdancodaDODoWCJW-JEVNN碰到我的【</h4>

					</div>
					<!-- <div class="cntl-image"><img src="./img/2.bmp"></div> -->

					<div class="cntl-image"><img src="../lib/images/time/2.bmp"></div>
					<div class="cntl-icon cntl-center">01</div>
				</div>
				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 2</h4>
						<!-- <p>劳动的人最美</p> -->
					</div>
					<div class="cntl-image">
						<div class="cntl-content">
							<h4>2019-3-31</h4>
							<p>班级活动之一 -- 聚餐，相亲相爱的一家人</p>
						</div>
						<img src="./img/5.bmp">
					</div>
					<div class="cntl-icon cntl-center">01</div>
				</div>
				<div class="cntl-states">

					<div class="cntl-state">
						<div class="cntl-content">
							<h4>2019-5-9</h4>
							<p>冠军之路 离不开大家的努力</p>
						</div>
						<div class="cntl-icon cntl-center">00</div>
					</div>
					<div class="cntl-state">
						<div class="cntl-content">
							<h4>Title 2</h4>
							<p>全脆皮沙尘暴脾气啊</p>
						</div>

						<div class="cntl-image"><img src="./img/b3.jpg"></div>
						<div class="cntl-icon cntl-center">01</div>
					</div>

					<div class="cntl-state">
						<div class="cntl-content">
							<h4>2019-3-21</h4>
							<p> 萨比job</p>
						</div>

						<div class="cntl-image"><img src="img/a2.png"></div>
						<div class="cntl-icon cntl-center">02</div>
					</div>

					<div class="cntl-state">
						<div class="cntl-content">
							<h4>Title 4</h4>
							<p>Mauris varius gravida ex, vitae efficitur leo. Quisque auctor pharetra velit, ac
								consectetur
								tellus congue a. Mauris ullamcorper nulla eu ex eleifend blandit. In vel tristique
								massa,
								vitae scelerisque dolor. Phasellus quis faucibus nibh. Integer molestie finibus justo
								vitae
								efficitur.<br><br>Fusce tincidunt leo velit. Nulla rhoncus condimentum nulla, quis porta
								dolor. Ut enim sapien, semper eget finibus at, interdum eget elit. Maecenas id est nisl.
								Pellentesque metus tortor, varius eget tempus non, congue ut sem. Vivamus id lacinia
								libero,
								quis ornare nibh.
							</p>
						</div>

						<div class="cntl-image"><img src="img/a3.png"></div>
						<div class="cntl-icon cntl-center">03</div>
					</div>

					<div class="cntl-state">
						<div class="cntl-content">
							<h4>Title 5</h4>
							<p>Nulla ut tellus eu ante dapibus euismod ut sit amet est. Sed posuere scelerisque turpis,
								in
								bibendum magna feugiat non. Pellentesque ac tincidunt nibh. Nunc congue eu augue eu
								placerat. Nullam congue ex diam, id tincidunt augue pellentesque ac. Phasellus ornare
								nulla
								tellus, suscipit finibus urna tincidunt non. Nunc fringilla consequat massa.
							</p>
						</div>

						<div class="cntl-image"><img src="img/a4.png"></div>
						<div class="cntl-icon cntl-center">04</div>
					</div>
					<div class="cntl-state">
						<div class="cntl-content">
							<h4>Title 4</h4>
							<p>Mauris varius gravida ex, vitae efficitur leo. Quisque auctor pharetra velit, ac
								consectetur
								tellus congue a. Mauris ullamcorper nulla eu ex eleifend blandit. In vel tristique
								massa,
								vitae scelerisque dolor. Phasellus quis faucibus nibh. Integer molestie finibus justo
								vitae
								efficitur.<br><br>Fusce tincidunt leo velit. Nulla rhoncus condimentum nulla, quis porta
								dolor. Ut enim sapien, semper eget finibus at, interdum eget elit. Maecenas id est nisl.
								Pellentesque metus tortor, varius eget tempus non, congue ut sem. Vivamus id lacinia
								libero,
								quis ornare nibh.
							</p>
						</div>

						<div class="cntl-image"><img src="./img/a6.png"></div>
						<div class="cntl-icon cntl-center">05</div>
					</div>
				</div>
			</div>

		</div>

		<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
		<script src="../lib/jquery/time/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="../lib/jquery/time/jquery.cntl.js"></script>
		<script type="text/javascript">
			$(document).ready(function (e) {
				$('.cntl').cntl({
					revealbefore: 300,
					anim_class: 'cntl-animate',
					onreveal: function (e) {
						console.log(e);
					}
				});
			});
		</script>
</body>

</html>